import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
import { Menu, Button } from 'antd';
import {
  AppstoreOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  PieChartOutlined,
  ContainerOutlined,
  MailOutlined,
  FormOutlined,
  SnippetsOutlined,
  SettingOutlined,
  UserOutlined,
  ProjectOutlined,
  SearchOutlined,
  FolderOpenOutlined,
  MessageOutlined
} from '@ant-design/icons';
import { useEffect, useState } from 'react';
import React from 'react';
import { Link, NavLink } from "umi"
import style from "./techLayout.less"
const { SubMenu } = Menu;
export default function TechLayout(props: any) {
  const [collapsed, setcollapsed] = useState(false)
  const toggleCollapsed = () => {
    setcollapsed(!collapsed)
  };
  return <Layout >
    <Sider collapsed={collapsed} width={195} >
      <div className={style.logo}>
        <img src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-favicon.png" alt="" />
        {!collapsed && <span >管理后台</span>}
      </div>
      <div className={style.btn}>
        <Button className={style.btn1} type="primary" size="large">+ {!collapsed && <span >新建</span>}</Button>
      </div>
      <div style={{ width: "100%" }} id={style.list}>
        <Menu
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          mode="inline"
          theme="dark">
          <Menu.Item key="1" icon={<PieChartOutlined />}>
            <Link to='/bench'>工作台</Link>
          </Menu.Item>
          <SubMenu key="sub2" icon={<FormOutlined />} title="文章管理">
            <Menu.Item key="one"> <Link to="/article">所有文章</Link></Menu.Item>
            <Menu.Item key="two"><Link to="/article/category">分类管理</Link></Menu.Item>
            <Menu.Item key="three"><Link to="/article/tags">标签管理</Link></Menu.Item>
          </SubMenu>
          <Menu.Item key="2" icon={<SnippetsOutlined />}>
            <Link to="/page"> 页面管理</Link>
          </Menu.Item>
          <Menu.Item key="3" icon={<ContainerOutlined />}>
            <Link to="/knowledge">  知识小册</Link>
          </Menu.Item>
          <Menu.Item key="4" icon={<ContainerOutlined />}>
            <Link to="/poster">   海报管理</Link>
          </Menu.Item>
          <Menu.Item key="5" icon={<MessageOutlined />}>
            <Link to="/comment">  评论管理</Link>
          </Menu.Item>
          <Menu.Item key="6" icon={<MailOutlined />}>
            <Link to='/mail'>邮件管理</Link>
          </Menu.Item>
          <Menu.Item key="7" icon={<FolderOpenOutlined />}>
            <NavLink to="/article/file">文件管理</NavLink>
          </Menu.Item>
          <Menu.Item key="8" icon={<SearchOutlined />}>
            <Link to="/Search">搜索记录</Link>
          </Menu.Item>
          <Menu.Item key="9" icon={<ProjectOutlined />}>
            <Link to="/visit">访问统计</Link>
          </Menu.Item>
          <Menu.Item key="10" icon={<UserOutlined />}>
            用户管理
          </Menu.Item>
          <Menu.Item key="11" icon={<SettingOutlined />}>
            系统设置
          </Menu.Item>
        </Menu>
      </div>
    </Sider>
    <Layout className={style.right}>
      <Header className={style.header}>  <Button type="primary" style={{ marginBottom: 16 }} onClick={() => { toggleCollapsed() }}>
        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
      </Button></Header>
      <Content className={style.main}>{props.children}</Content>
    </Layout>
  </Layout>
}